<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctxPath" value="${pageContext.request.contextPath}" />
<%@ include file="/WEB-INF/inc/taglibs.jsp"%>


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>小蓝管理系统</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="${ctxPath}/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="${ctxPath}/layuiadmin/style/admin.css" media="all">
  
</head>
<body class="layui-layout-body">
  
  <div id="LAY_app">
    <div class="layui-layout layui-layout-admin">
      <div class="layui-header">
        <!-- 顶部区域 -->
        <!-- 左上角区域 -->
        <ul class="layui-nav layui-layout-left">
          <li class="layui-nav-item layadmin-flexible" lay-unselect>
            <a href="javascript:;" layadmin-event="flexible" title="侧边伸缩">
              <i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible"></i>
            </a>
          </li>
          <li class="layui-nav-item" lay-unselect>
            <a href="javascript:;" layadmin-event="refresh" title="刷新">
              <i class="layui-icon layui-icon-refresh-3"></i>
            </a>
          </li>
          <li class="layui-nav-item" lay-unselect>
          	<a href="#" lay-href="//www.baidu.com/" title="百度一下">百度一下
            </a>
          </li>
        </ul>
        <!--左上角附加菜单-->
        <div class="beg-layout-main beg-layout-menu" id="menu">
          <ul class="layui-nav beg-layout-nav" lay-filter="">

          </ul>
        </div>
        <!-- 右上角区域 -->
        <ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">
          <li class="layui-nav-item layui-hide-xs" lay-unselect>
            <a href="javascript:;" layadmin-event="theme">
              <i class="layui-icon layui-icon-theme"></i>
            </a>
          </li>
          <li class="layui-nav-item layui-hide-xs" lay-unselect>
            <a href="javascript:;" layadmin-event="note">
              <i class="layui-icon layui-icon-note"></i>
            </a>
          </li>
          <li class="layui-nav-item layui-hide-xs" lay-unselect>
            <a href="javascript:;" layadmin-event="fullscreen">
              <i class="layui-icon layui-icon-screen-full"></i>
            </a>
          </li>
          <li class="layui-nav-item" lay-unselect>
            <a href="javascript:;">
           	 <img src="${ctxPath}/layuiadmin/xx.jpg" class="layui-nav-img">
              <cite><shiro:principal property='name'/></cite>
            </a>
            <dl class="layui-nav-child">
              <dd><a lay-href="https://www.layui.com/admin/std/dist/views/set/user/info.html" style="text-align: center;">基本资料</a></dd>
              <dd><a lay-href="https://www.layui.com/admin/std/dist/views/set/user/password.html" style="text-align: center;">修改密码</a></dd>
              <hr>
              <dd layadmin-event="logout" style="text-align: center;"><a>退出</a></dd>
            </dl>
          </li>
          
          <li class="layui-nav-item layui-hide-xs" lay-unselect>
            <a href="javascript:;" layadmin-event="about"><i class="layui-icon layui-icon-more-vertical"></i></a>
          </li>
          <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-unselect>
            <a href="javascript:;" layadmin-event="more"><i class="layui-icon layui-icon-more-vertical"></i></a>
          </li>
        </ul>
      </div>
      
      <!-- 侧边菜单 -->
      <div class="layui-side layui-side-menu">
        <div class="layui-side-scroll">
          <%--logo--%>
          <div class="layui-logo" lay-href="toSysConsole" style="position: relative">
            <span>小蓝管理系统</span>
          </div>
            <!-- 管理员信息      -->
            <div class="user-info">
              <div class="">
                <img style="margin:auto;display: block" class="layui-team-img layui-btn-radius layui-border-box" src="${ctxPath }<shiro:principal property='img'/>" alt="">
                <div style="text-align: center;font-weight: bold;font-size: larger"><shiro:principal property='name'/></div>
              </div>
            </div>
            <%--菜单信息--%>
            <ul class="layui-nav layui-nav-tree"  lay-filter="side" id="side">
            </ul>

        </div>
      </div>

      <!-- 页面标签 -->
      <div class="layadmin-pagetabs" id="LAY_app_tabs">
        <div class="layui-icon layadmin-tabs-control layui-icon-prev" layadmin-event="leftPage"></div>
        <div class="layui-icon layadmin-tabs-control layui-icon-next" layadmin-event="rightPage"></div>
        <div class="layui-icon layadmin-tabs-control layui-icon-down">
          <ul class="layui-nav layadmin-tabs-select" lay-filter="layadmin-pagetabs-nav">
            <li class="layui-nav-item" lay-unselect>
              <a href="javascript:;"></a>
              <dl class="layui-nav-child layui-anim-fadein">
                <dd layadmin-event="closeThisTabs"><a href="javascript:;">关闭当前标签页</a></dd>
                <dd layadmin-event="closeOtherTabs"><a href="javascript:;">关闭其它标签页</a></dd>
                <dd layadmin-event="closeAllTabs"><a href="javascript:;">关闭全部标签页</a></dd>
              </dl>
            </li>
          </ul>
        </div>
        <div class="layui-tab" lay-unauto lay-allowClose="true" lay-filter="layadmin-layout-tabs">
          <ul class="layui-tab-title" id="LAY_app_tabsheader">
            <li lay-id="User/console" lay-attr="User/console" class="layui-this"><i class="layui-icon layui-icon-home"></i></li>
          </ul>
        </div>
      </div>
      
      
      <!-- 主体内容 -->
      <div class="layui-body" id="LAY_app_body">
        <div class="layadmin-tabsbody-item layui-show">
          <iframe src="${ctxPath}/toSysConsole" frameborder="0" class="layadmin-iframe"></iframe>
        </div>
      </div>
      <!-- 辅助元素，一般用于移动设备下遮罩 -->
      <div class="layadmin-body-shade" layadmin-event="shade"></div>
    </div>
  </div>

  <script src="${ctxPath}/layuiadmin/layui/layui.js"></script>
  <script src="${ctxPath}/js/jquery-1.11.1.min.js"></script>
  <script>
  layui.config({
    base: '${ctxPath}/layuiadmin/'
  }).extend({
    index: 'lib/index',
    common:'ext/res/js/common',
    navbar:'ext/res/js/navbar'
  }).use(['index','element', 'common', 'navbar'], function() {
    var element = layui.element,
        navbar = layui.navbar,
        common = layui.common;

    //初始化顶级菜单
    $.getJSON('${ctxPath}getMenuTop?t=' + Math.random(), function(menuData) {
      $('#menu').html(getTopHtml(menuData));
      element.init();

      var $menu = $('#menu');
      $menu.find('li.layui-nav-item').each(function() {
        var $this = $(this);
        //绑定一级导航的点击事件
        $this.on('click', function() {
          //获取设置的模块ID
          var id = $this.find('a').data('module-id');
          //这里的数据源只是演示时用的，实际需求可能通过远程读取（根据模块ID来获取对应模块的信息）
          var url;

          //设置数据源有两个方式。
          //第一：在此页面通过ajax读取设置  举个栗子： 两个栗子都先留这边，可以根据自己情况修改
          //---------这是第一个栗子----------
          $.getJSON('${ctxPath}getMenuByPidRec',{id:id},function(data){
            navbar.set({
              elem: '#side',
              data: data
            });
            navbar.render();
            navbar.on('click(side)', function(data) {
              tab.tabAdd(data.field);
            });
          });
        });

      });

      //模拟点击顶级菜单的第一个菜单按钮
      $.getJSON('${ctxPath}/getTopMenuFirst?t=' + Math.random(), function(id) {
        $('.beg-layout-menu').find('a[data-module-id='+id+']').click();
      });

    });

    element.on('nav(user)', function(data) {
      var $a = data.children('a');
      if($a.data('tab') !== undefined && $a.data('tab')) {
        tab.tabAdd({
          title: $a.children('cite').text(),
          //icon: 'fa-user',
          href: $a.data('url')
        });
      }
    });

    /*<li class="layui-nav-item layui-this">
        <a href="javascript:;" data-module-id="1">
            <i class="fa fa-desktop" aria-hidden="true"></i>
            <cite>内容管理</cite>
        </a>
    </li>*/


    //顶级菜单获取html字符串
    function  getTopHtml(data) {
      var ulHtml = '';
      ulHtml += '<ul class="layui-nav beg-layout-nav" lay-filter="">';
      for (var i = 0; i < data.length; i++) {
        if (i == 0) {
          ulHtml += '<li class="layui-nav-item layui-this">';
        } else {
          ulHtml += '<li class="layui-nav-item">';
        }
        ulHtml += '<a href="javascript:;" data-module-id="'+data[i].id+'">';
        ulHtml += '<i class="one-top-icon fa '+ data[i].icon+'" aria-hidden="true"></i>&nbsp;';
        ulHtml += '<cite>' + data[i].title + '</cite>';
        ulHtml += '</a>';
        ulHtml += '</i>';
      }
      ulHtml += '</ul>';
      return ulHtml;
    }

    //清除缓存
    $(".clearCache").click(function(){
      window.sessionStorage.clear();
      window.localStorage.clear();
      var index = layer.msg('清除缓存中，请稍候',{icon: 16,time:false,shade:0.8});
      setTimeout(function(){
        layer.close(index);
        layer.msg("缓存清除成功！");
      },1000);
    })

    //退出
    $('#logout').on('click', function () {
      /* var url = path + '/login/logout.do';
       layer.confirm('退出登陆提示！', '你真的确定要退出系统吗？', url);*/
      window.location.href='${ctxPath}/logout';
    })
  });
  </script>
</body>
</html>



